<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>电商大数据管理平台</title>
		<link rel="icon" href="icon.ico">
		<link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.css">
		<link rel="stylesheet" href="css/dashboard.css">
		<link rel="stylesheet" type="text/css" href="plugins/element-ui/theme-default/index.css" />
		<!--[if lt IE 9]>
	    <script src="plugins/html5shiv/html5shiv.min.js"></script>
	    <script src="plugins/respond/respond.min.js"></script>
	    <![endif]-->
		<style>
			.mybtn:active {
				background-color: blue !important;
				box-shadow: none !important;
				border: none !important;
			}
			
			body {
				background-image: url(images/bj2.jpg);
				background-size: auto;
				background-repeat: no-repeat;
			}
		</style>
	</head>

	<body>
		<div id="app">

			<div class="col-xs-12 text-center" style="margin-top: 90px;margin-bottom: 10px;">
				<img src="images/bjtittle.png" />
			</div>
			<div class="col-xs-12" style="padding: 35px;">
				<div style="box-shadow:4px 4px 4px rgba(0,0,0,0.6);padding-top: 20px;padding-bottom: 20px;width: 530px;height: 320px; border-radius: 10px;margin-left: auto;margin-right: auto;background:#0D72D6;border-top:3px solid #B4D8EF;
					filter:progid:DXImageTransform.Microsoft.Shadow(color=#11273C,direction=120,strength=6);/*ie*/
					-moz-box-shadow: 6px 6px 12px #11273C;/*firefox*/
					-webkit-box-shadow: 6px 6px 12px #11273C;/*safari或chrome*/
					box-shadow:6px 6px 12px #11273C;/*opera或ie9*/" @keyup.enter="submitForm('params')">

					<div style="padding: 0px;margin-top: 40px;">
						<div class="col-xs-4  text-right" style="font-size: 18px; color: #ffffff;margin-top: 5px;">用户名:</div>
						<div class="col-xs-8 text-left"><input v-model="params.loginName" type="text" class="form-control" placeholder="请输入名字" style="width: 200px;"></div>
					</div>
					<div style="padding-top: 60px;margin-top: 40px;">
						<div class="col-xs-4  text-right" style="font-size: 18px; color: #ffffff;margin-top: 5px;">密码:</div>
						<div class="col-xs-8 text-left"><input type="password" v-model="params.loginSecret" class="form-control" placeholder="请输入密码" style="width: 200px;"></div>
					</div>
					<div style="margin-top: 45px;">
						<div class="col-xs-4  text-right"></div>
						<div class="col-xs-8 text-left" style="font-size: 16px; color: #000000;"><input v-model="params.isSaveAccount" @change="isSaveAccountD()" type="checkbox"> 请记住我
							</>
						</div>
					</div>
					<div style="margin-top: 85px;">
						<div class="col-xs-12  text-center">
							<a @click="submitForm('params')" class="btn mybtn" style="border:none;font-size: 18px; width: 200px;color: #ffffff; background-color: #0E82F7;border-top:1px solid;border-left:1px solid;border-color: #82BEFB;box-shadow: 2px 2px 1px rgba(0,0,0,0.4);">登录</a>
						</div>
					</div>
			</div>

		</div>
		<div class="col-xs-12" style="padding-top: 30px;">
			<div class="col-xs-4 text-right">
				<a href="#"><img src="images/1.png" class="img-circle" style="width: 124px;height: 124px;">
					<div style="font-size: 18px; color: #ffffff; padding-right: 26px;">数据采集</div>
				</a>
				<img src="images/jzfw.png" style="float: right;display: block;margin-right: -44px;" />
			</div>
			<div class="col-xs-4 text-center">
				<a href="#"><img src="images/2.png" class="img-circle" style="width: 124px;height: 124px;">
					<div style="font-size: 18px; color: #ffffff;">数据分析</div>
				</a>
				<img src="images/cjfz.png" style="margin: auto;display: block;" />
			</div>
			<div class="col-xs-4 text-left">
				<a href="#"><img src="images/3.png" class="img-circle" style="width: 124px;height: 124px;">
					<div style="font-size: 18px; color: #ffffff; padding-left: 26px;">数据应用</div>
				</a>
				<img src="images/kxjc.png" style="float: left;display: block;margin-left: -40px;" />
			</div>
		</div>
		</div>

		<script src="plugins/jquery/jquery.min.js"></script>
		<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
		<script src="js/ie10-viewport-bug-workaround.js"></script>
		<script type="text/javascript" src="js/vue.min.js"></script>
		<script src="plugins/element-ui/index.js"></script>
		<script>
			new Vue({
				el: "#app",
				data: {
					//登录接口参数
					params: {
						clientId: '',
						loginName: '',
						loginSecret: '',
						verifyCode: '',
						isSaveAccount: false
					},
					userData: {},
					images: ['images/right1.png', 'images/right3.png'],
					//表单验证规则
					rules: {
						loginName: [{
							required: true,
							message: '请输入手机号码或用户名',
							trigger: 'blur'
						}],
						loginSecret: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						}]
					},
					//登录按钮状态变化
					isSubmiting: false,
					//跳转保留
					redirect: null

				},
				mounted: function() {
					var vm = this;
					if(localStorage.isSaveAccount == 'true') {
						vm.params.isSaveAccount = true;
						vm.params.loginName = localStorage.loginName;
					}
				},
				methods: {
					writeCookie: function(name, value, expires_in) {
						var expire = new Date((new Date()).getTime() + expires_in);
						expire = "; expires=" + expire.toGMTString();
						document.cookie = name + "=" + encodeURIComponent(value) + expire + "; path=/";
					},
					isSaveAccountD: function() {
						if(this.params.isSaveAccount == true) {
							localStorage.loginName = this.params.loginName;
							localStorage.isSaveAccount = true;
							this.params.isSaveAccount = true;
						} else {
							localStorage.loginName = "";
							localStorage.isSaveAccount = false;
							this.params.isSaveAccount = false;
						}
					},
					submitForm: function(formName) {
						this.isSubmiting = true;
						var vm = this;
						if(vm.params.loginName != "") {
							$.ajax({
								type: "post",
								url: "auth/login/",
								data: JSON.stringify(vm.params),
								contentType: "application/json",
								success: function(data) {
									vm.userData = data;
									vm.isSubmiting = false;
									vm.saveData();
									window.location.href = "index.html"
									vm.writeCookie("role", data.clientId, 180 * 24 * 60 * 60 * 1000);
									vm.writeCookie("job", data.job, 180 * 24 * 60 * 60 * 1000);
									vm.writeCookie("orgClass", data.clientOrgClass, 180 * 24 * 60 * 60 * 1000);
									console.log(data)
								},
								error: function(err) {
									var meg = "";
									if(err.status == 400) {
										meg = "账号错误";
									} else if(err.status == 500) {
										meg = "密码错误";
									}
									vm.$message({
										showClose: true,
										message: meg,
										type: 'error'
									});
									vm.isSubmiting = false;
									console.log(err.status);
								}
							});
						} else {
							vm.$message({
								showClose: true,
								message: "请输入账号密码！",
								type: 'warning'
							});
							vm.isSubmiting = false;
						}
					},
					saveData: function() {
						sessionStorage.openid = this.userData.openid;
						if(this.params.isSaveAccount == true) {
							localStorage.loginName = this.params.loginName;
						} else {
							localStorage.loginName = "";
						}
					}

				}
			});
		</script>
	</body>

</html>